<!--
 * @FileDescription: 基础表格
 * @Author: 周沿江
 * @Date: 2021/6/25
 * @LastEditors: 周沿江
 -->
<template>

  <div class="container">

    <div class="handle-box">
      <el-button size="mini" @click.native="export_seletion" :disabled="show" type="primary"
                 :style="'font-size: 14px; margin-right: 20px;margin-top: 1px;display:'+show_submit_button">
        <i class="el-icon-lx-forward"></i>
        加入任务
      </el-button>
      <el-dropdown
          size="small"
          placement="bottom"

          @command="batchOperate"
          style="margin-left: 10px;"
      >

        <el-button size="mini" :disabled="show" type="primary"
                   :style="'font-size: 14px; margin-right: 20px;margin-top: 1px;display:'+show_export_button">

          导出
          <i class="el-icon-arrow-down"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="export_excel">导出为excel
          </el-dropdown-item>
          <el-dropdown-item command="export_csv">导出为csv</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>


      <el-input v-model="search_data" :placeholder="search_column" class="input-with-select" style="width: 350px">
        <el-select slot="prepend" v-model="search_column" placeholder="请选择" style="width: 90px">
          <el-option v-for="one in filter_column" :key="one.field" :label="one.title"
                     :value="one.field"></el-option>
        </el-select>

        <el-button slot="append" icon="el-icon-search" @click="handleSearch"
                   style="font-size: 17px;padding: 12px 10px 5px 7px"></el-button>
        <div style="float:left;margin-top: 30px;width: 5px;height: 200px; background:white;"></div>
        <el-button slot="append" icon="el-icon-refresh-left" @click="resetSearch"
                   style="font-size: 17px;padding: 12px 7px 5px 10px;margin-left: 20px"></el-button>
      </el-input>

      <el-select
          v-model="filter_column"
          multiple
          collapse-tags
          filterable
          style="margin-left: 20px; width: 180px;background-color: #e9e9eb"
          placeholder="请选择显示字段"
          value-key="field"

      >
        <el-option
            v-for="one in query_column"
            :key="one.field"
            :label="one.title"
            :value="one">
        </el-option>
      </el-select>


      <!--          <el-dropdown>-->
      <!--            <el-button type="primary">-->
      <!--              更多菜单<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
      <!--            </el-button>-->
      <!--            <el-dropdown-menu slot="dropdown" >-->
      <!--              <el-dropdown-item v-for="one in query_column"-->
      <!--                                :key="one.field"><el-checkbox  v-model="filter_column">{{ one.title }}</el-checkbox></el-dropdown-item>-->
      <!--            </el-dropdown-menu>-->
      <!--          </el-dropdown>-->
    </div>


    <el-table
        :data="filter_search_table_data.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        border
        style="width: 100%"
        class="table"
        ref="multipleTable"
        @row-click="rowClickHandle"
        @select-all="handleALLSelectionChange"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
        :height="table_height"
        :row-key="getRowKey"

    >
      <el-table-column :reserve-selection="true" type="selection" width="40" align="center"></el-table-column>
      <el-table-column :label="one.title" v-for="one in filter_column " show-overflow-tooltip>
        <template slot-scope="scope">
          <el-progress v-if="one.addition" :text-inside='true' :stroke-width=24 :percentage=scope.row[one.field]
                       :color=scope.row.addition></el-progress>
          <div v-else class="text">{{ scope.row[one.field] }}</div>
        </template>

      </el-table-column>


      <!--<el-table-column prop="name" label="用户名"></el-table-column>-->
      <!--<el-table-column label="状态" align="center">-->
      <!--<template slot-scope="scope">-->
      <!--<el-tag-->
      <!--:type="scope.row.state==='成功'?'success':(scope.row.state==='失败'?'danger':'')"-->
      <!--&gt;{{scope.row.state}}</el-tag>-->
      <!--</template>-->
      <!--</el-table-column>-->


      <!--<el-table-column label="操作" width="180" align="center">-->
      <!--<template slot-scope="scope">-->
      <!--<el-button-->
      <!--type="text"-->
      <!--icon="el-icon-edit"-->
      <!--@click="handleEdit(scope.$index, scope.row)"-->
      <!--&gt;编辑</el-button>-->
      <!--<el-button-->
      <!--type="text"-->
      <!--icon="el-icon-delete"-->
      <!--class="red"-->
      <!--@click="handleDelete(scope.$index, scope.row)"-->
      <!--&gt;删除</el-button>-->
      <!--</template>-->
      <!--</el-table-column>-->
    </el-table>


    <div class="pagination">
      <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="currentPage"
          :page-size="pagesize"
          :total="filter_search_table_data.length"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
          :page-sizes="[10, 20, 50,100]"
      ></el-pagination>
    </div>

  </div>


</template>

<script>
import {fetchData} from '../../api/index';
import exportFile from '../../utils/exportFile'

export default {
  name: 'basetable',
  props: {
    row_click_func: {
      type: String,
      required: false,
      default: ""
    },
    show_submit_button: {
      type: String,
      required: false,
      default: ""
    },
    show_export_button: {
      type: String,
      required: false,
      default: ""
    },
    table_height: {
      type: Number,
      required: false,
      default: 320
    }
  },
  data() {
    return {
      show: true,
      filter_search_table_data: [],
      filter_table_data: "",
      search_data: "",
      search_column: "",
      query_column: [],
      filter_column: [],
      currentPage: 1, //初始页
      pagesize: 20,    //每页的数据

      table_data: [],
      query_data: [],//请求的数据
      multipleSelection: [],
      multipleALLSelection: [],
      submit_list: [],

    };
  },
  created() {


  },
  mounted() {


  },

  methods: {
    /**
     *行点击句柄
     * @param row
     * @param column
     * @param event
     */
    rowClickHandle(row, column, event) {
      this.$emit('get_click_row', row)
    },
    /**
     * 表格初始化
     * @param query_data  初始化数据
     * @param query_column 字段
     */
    init(query_data, query_column) {
      //var data = await this.$http.post('/task_undotask/undo_taskAjax');
      this.query_data = query_data;
      this.query_column = query_column;
      this.filter_table_data = this.query_data;
      this.filter_search_table_data = this.query_data;
      this.filter_column = this.query_column;
    },
    /**
     * 重置搜索框
     */
    resetSearch() {
      this.filter_search_table_data = this.filter_table_data
    },
    /**
     * 搜索句柄
     */
    handleSearch() {
      console.log(this.search_column)
      this.filter_search_table_data = [];
      for (var i = 0; i < this.filter_table_data.length; i++) {
        var each = this.filter_table_data[i];
        console.log(each[this.search_column])
        if (String(each[this.search_column]).toLowerCase().indexOf(this.search_data) > -1) {
          this.filter_search_table_data.push(each)
        }
      }
      this.currentPage = this.currentPage;
      //Vue.set(this.filter_search_table_data,this.filter_search_table_data)
    },
    /**
     * 多选操作句柄
     * @param val
     */
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection)
      if (this.multipleSelection) {
        this.show = false;
      } else {
        this.show = true
      }
      this.$emit('get_selection_result', this.multipleSelection)
    },
    /**
     * 全选操作句柄
     * @param val
     */
    handleALLSelectionChange(val) {
      this.multipleSelection = this.query_data;
    },
    /**
     * 分页导航句柄
     * @param val
     */
    handlePageChange(val) {
      this.currentPage = val;
      if (this.multipleSelection) {
        this.multipleSelection.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row, true)

        })
      } else {
        this.multipleSelection.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row, false)
        })
      }

    },
    /**
     * 分页大小句柄
     * @param val
     */
    handleSizeChange: function (val) {
      this.pagesize = val;
    },

    getRowKey(row) {
      return row.play_addr;
    },

    export_seletion() {
    },

    /**
     * 导出批处理操作
     * @param command
     */
    batchOperate(command) {
      switch (command) {
        case "export_excel":
          exportFile.getExcel(JSON.stringify(this.multipleSelection), '111')
          break;
        case "export_csv":
          exportFile.getCsv(JSON.stringify(this.multipleSelection), '111')
          break;
      }

    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 140px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
